<template>
  <div class="all">
    <header>
      <div class="header_left" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span class="side" >返回</span>
      </div>
      <div class="header_content">
        <span>患者签字确认</span>
      </div>
      <div class="header_right">
        <span class="side"></span>
      </div>
    </header>
    <div class="content">
      <vue-esign ref="esign" style="background: #1da4f2"
                 :width="800"
                 :height="2000"
                 :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<!--      <button @click="handleReset">清空画板</button>-->
<!--      <button @click="handleGenerate">生成图片</button>-->
    </div>
    <div class="bottom">
      <button @click="handleReset()">清除</button>
      <button class="backBlue" @click="handleGenerate()"> 确认</button>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'Write',
  data () {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false,
      height: 0
    }
  },
  mounted () {
    this.height = $(window).height() - $('.bottom').height() - $('header').height()
    $('.content').css('height', $(window).height() - $('.bottom').height() - $('header').height() - 70 + 'px')
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 清空画布
    handleReset () {
      this.$refs.esign.reset()
    },
    // 生成图片
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
        // console.log(this.resultImg)
        var data = JSON.parse(sessionStorage.getItem('data'))
        console.log(data)
        this.$http.insertFriendSign({
          patient_user_id: data.patient_user_id,
          staff_user_id: data.staff_user_id,
          sign_start_date: data.sign_start_date,
          sign_end_date: data.sign_end_date,
          is_agreement: data.is_agreement,
          is_manage_doctor: data.is_manage_doctor,
          sign_url: this.resultImg,
          signOauths: data.signOauths.toString()
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.$router.history.go(-2)
              window.sessionStorage['menuIndex'] = 1
            }
          })
          .catch(err => {
            console.log(err)
          })
      }).catch(err => {
        console.log(err)
        Toast('请签字确认') // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    send () {
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }
  header div{
    /*width: 33%;*/
    display: flex;
    align-items: center;
  }
  .header_left{
    width: 20%;
  }
  .header_right{
    width: 20%;
    justify-content: flex-end;
  }
  .header_right span{
    margin-right: 15px;
  }
  .header_content{
    width: 60%;
    justify-content: center;
  }
  header img{
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }
  .side{
    color: #1da4f2;
  }
  .content{
    width: 95%;
    /*height: 80vh;*/
    background: #FFFFFF;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .bottom{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 50px;
    padding: 10px;
    box-sizing: border-box;
  }
  .bottom button{
    width: 49%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #1DA4F2;
    border-radius: 5px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1da4f2;
  }
  .backBlue{
    color: #FFFFFF !important;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2)!important;
  }
</style>
